<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key" clearable>
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="3">
			<Select  clearable  placeholder="请选择状态" v-model="statusKey" :style="{paddingLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="11">
			<span :style="{paddingLeft:'15px'}"></span>
			<Button type="primary" @click="search">搜索</Button>
			<Button type="info" @click="init()"><Icon type="md-refresh" :size="16"/></Button>
		</Col>
		<Col span="4">
			<div style="text-align:right">
				<!-- <Button type="primary" icon="md-add" :to='{"name":"welisten-order-create"}'>新增</Button> -->
			</div>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table ref="vTable" :loading="tableLoading" border stripe :columns="columns" :data="commentData.data">
				<!-- 操作 -->
				<template slot="action" slot-scope="props">
					<Button type="success" size="small" @click.native="onRowEdit(props.params.row.id)">编辑</Button>

					<Button type="primary" size="small"  @click.native="onRowRefund(props.params.row.id,props.params.row.status,props.params.index)"
					v-if="1==props.params.row.status || 7==props.params.row.status">退款</Button>

					<Button type="warning" size="small" @click.native="onRowCancel(props.params.row.id,props.params.index)"
					v-if="0==props.params.row.status">取消</Button>

					<Button type="error" size="small" ghost 
					v-if="0==props.params.row.status||3==props.params.row.status"
					@click.native="onRowDelete(props.params.row.id,props.params.index)">删除</Button>
				</template>
			</Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="commentData.total" :page-size="commentData.pageSize" :current.sync="commentData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>

	
	<Modal v-model="showDetail" title="详情" cancel-text="">
		<div v-html="currentContent"></div>
    </Modal>
</div>
</template>
<script>


// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
import { isNullOrUndefined } from 'util';
export default { 
	name:'welisten-order-index',
	components: {ListenerSelector,Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'订单管理',
			tableLoading:true,
			commentData:[],
			showBox:false,
			currentContent:'',
			showDetail:false,
			statusKey:'',
			statusList: [
				{value: 0,label: '待付款'},
				{value: 1,label: '已付款'},
				{value: 2,label: '已完成'},
				{value: 3,label: '已取消'},
				{value: 4,label: '已过期'},
				{value: 5,label: '已评价'},
				{value: 6,label: '服务中'},
				{value: 7,label: '退款中'},
				{value: 8,label: '已退款'},
			],
			realname:'',
			filterKey:'',
			key:'',
			keyList: [
				{value: 'oid',label: '订单号'},
				{value: 'title',label: '产品名称'},
				{value: 'nickname',label: '用户名称'},
				{value: 'lnickname',label: '倾听者名称'},
				{value: 'memo',label: '备注'},
			],
			columns:[
				{title: '订单号',key: 'oid',width: 160,fixed: 'left'},
				{title: '用户名称',key: 'nickname'},
				{title: '倾听者名称',key: 'lnickname'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['待付款','已付款','已完成','已取消','已过期','已评价','服务中','退款中','已退款']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '排序',key: 'sequence', sortable: true},
				{title: '产品名称',key: 'title'},
				{title: '金额',key: 'amount'},
				{title: '数量',key: 'qty'},
				{title: '备注',key: 'memo'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:220,
					render: (h, params) => {
						return h(
							'div',
							this.$refs.vTable.$scopedSlots.action({ 'params': params })
						)
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let a=null
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/orders",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/orders",{params: { 'token': self.token, page:self.commentData.page, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.commentData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/welisten/orders",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/welisten/orders?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				self.tableLoading=false
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.commentData.data.splice(index,1)}
					else{self.commentData.data[index].status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/orders",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		},
		onRowEdit(id){this.$router.push({path:'/welisten/order/edit/'+id})},
		onRowDelete:function(id,index){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					let self=this
					self.$store.dispatch("setSpinShow",true)
					self.$http.post("/v1/welisten/orders?_method=delete&token="+self.token,{'id':id,'memo':'后台人工删除'})
					.then(function(response){
						self.$store.dispatch("setSpinShow",false)
						if(200==response.data.status && 0==response.data.code)
						{
							self.$Message.success('操作成功');
							self.commentData.data.splice(index,1)
						}else{
							self.$Message.error(response.data.message)
							self.init()
						}
					}).catch(function(error){
						self.$Message.error( error.message)
						self.$store.dispatch("setSpinShow",false)
					})
				},
			})

		},
		onRowCancel:function(id,index){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders/cancel?token="+self.token,{'id':id,'memo':'后台人工取消'})
			.then(function(response){
				self.$store.dispatch("setSpinShow",false)
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData.data[index].status=3
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onRowRefund:function(id,status,index){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders/refund?token="+self.token,{'id':id,'memo':1==status?'后台人工退款':'用户申请退款'})
			.then(function(response){
				self.$store.dispatch("setSpinShow",false)
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData.data[index].status=8
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	},
	watch:{
	}
}



</script>
<style lang="less" scoped>
</style>